import React, { useMemo,useState } from "react";

// useMemo起到的是将结果进行记忆。
// 第一个参数是一个函数，会将该函数运行，返回该函数运行的结果
// 第二个参数是一个数组，如果省略，useMemo无效（不会产生记忆）。
//     如果第二个参数是一个[],那么会产生记忆。
//     如果第二个参数是一个[arr],那么当arr引用地址发生变化会，会重新运行函数（传入的第一个参数），并产生记忆。
export default function App() {
   const [num,setNum] = useState(1);

  const [arr, setArr] = useState([
    {
      id: 1,
      thing: "买早点",
      money: -10,
    },
    {
      id: 2,
      thing: "扶老太太过马路",
      money: 100,
    },
    {
      id: 3,
      thing: "去工地搬砖",
      money: 10,
    },
  ]);
  const count = useMemo(() => {
    console.log(11);
    let n = 0;
      arr.forEach(v => n += v.money);
      return n;
  },[arr]);
  return (
    <div>
      <button
        onClick={() => {
          setNum(200);
        }}
      >
        {num}
      </button>
          <button onClick={() => {
              setArr([
                  {
                      id: Date.now(),
                      thing: '请吃大餐',
                      money:21000
                  },
                  ...arr
              ])
          }}>点我</button>
          <h3>班长的一天</h3>
          {/* toFixed()  将Number转为指定位数的小数 */}
          <h3>合计：￥{count.toFixed(2)}</h3>
          {
              arr.map(item => (<p key={item.id}>{item.thing}::￥{item.money.toFixed(2)}</p>))
          }
            <h3>合计：￥{count.toFixed(2)}</h3>

    </div>
  );
}
